<template>
	<view class="container">
		<image class="w-100" :src="imageUrl" mode="widthFix"></image>
		<view class="content">
			<view class="welcome" @tap="openLoginPopup">
				<view>你好 {{ hasLogin ? userInfo.nickName : '立即登录开启'+brandName+'星球之旅' }}</view>
				<view class="font-size-base">灵感之茶，中国制造</view>
			</view>

		<list-cell hover arrow >
			<view class="list-cell-wrapper" >
				<view view="title" @click="$api.noOpen">会员码</view>
				<view class="subtitle">门店扫码积分、{{brandName}}钱包支持</view>
			</view>
		</list-cell>
		<list-cell hover arrow>
			<view class="list-cell-wrapper" @click="$api.noOpen">
				<view view="title">兑换中心</view>
				<view class="subtitle">兑换星球会员、糖券</view>
			</view>
		</list-cell>
		<list-cell hover arrow @click="$api.noOpen">
			<view class="list-cell-wrapper">
				<view view="title">星球封面</view>
			</view>
		</list-cell>
		<list-cell hover arrow>
			<view class="list-cell-wrapper">
				<view view="title">联系客服</view>
			</view>
		</list-cell>
		<list-cell hover arrow @click="$api.noOpen">
			<view class="list-cell-wrapper">
				<view view="title">消息中心</view>
			</view>
		</list-cell>
      <list-cell hover arrow @tap="managerCoupon">
        <view class="list-cell-wrapper">
          <view view="title">我的优惠卷</view>
        </view>
      </list-cell>
		<list-cell hover arrow last @click="$api.noOpen">
			<view class="list-cell-wrapper">
				<view view="title">更多</view>
			</view>
		</list-cell>
      <list-cell hover arrow last >
        <view class="list-cell-wrapper" @tap="managerShop">
          <view view="title">我是商家</view>
        </view>
<!--        <view class="sunui">-->
<!--          <view class="sunui-title">右滑拖动验证</view>-->
<!--          <sunui-mverify @change="mverify"></sunui-mverify>-->
<!--        </view>-->
      </list-cell>
      <list-cell>

      </list-cell>
		<!-- 登录popup -->
		<login-popup ref="loginPopup"></login-popup>
      <view>
        <button type="primary" :disabled="isLoading" :loading="isLoading" @click="showAd">显示广告</button>
      </view>
	</view>


  </view>
</template>

<script>
	import listCell from '@/components/list-cell/list-cell.vue'
	import loginPopup from './components/login-popup.vue'
  import sunuiMverify from '../../components/sunui-mverify/sunui-mverify.vue';

	import { mapState } from 'vuex'

	export default {
		components: {
			listCell,
			loginPopup,
      sunuiMverify
		},
		data() {
			return {
				boardcast: [],
        isMverify: false,
        brandName: this.$api.brandName,
        imageUrl:'',
        isLoading: false,
        rAd: null
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		bindGetUserInfo (e) {
			console.log("aaa",e.detail.userInfo);
		},
		getUserProfile (e){
			console("bbb",e)
		},
		async onLoad() {
      console.log("mnm",this.$api.brandName)
      let flag =  this.$api.customStoreageManage.getStorage("currentBrand")
      this.imageUrl = flag.myimgUrl
      console.log("flag",flag)
			// 查看是否授权
			wx.getSetting({
			    success: function(res){
			        if (res.authSetting['scope.userInfo']) {
			          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
			          // wx.getUserInfo({
			          //   success: function(res) {
			          //     console.log(res.userInfo)
			          //   }
			          // })
			        } else {
						// 没有授权，弹出授权窗口
						this.$refs['loginPopup'].open();
					}
			      },
				});

			const userInfo = uni.getStorageSync("userInfo");
			if (userInfo) {
				this.$store.commit("login", userInfo);
			}

			this.boardcast = await this.$api('boardcast')
		},
    onReady() {
      this.rAd = wx.createRewardedVideoAd({adUnitId:"adunit-3c642ec8f76a3ee5"});
      this.rAd.load();
      this.rAd.onError(err=>{

      })

    },
		methods: {
      showAd() {
        this.rAd.show()
      },
      onadload(e) {
        this.isLoading = false;
        console.log('广告数据加载成功');
      },
      onadclose(e) {
        const detail = e.detail
        // 用户点击了【关闭广告】按钮
        if (detail && detail.isEnded) {
          // 正常播放结束
          console.log("onClose " + detail.isEnded);
        } else {
          // 播放中途退出
          console.log("onClose " + detail.isEnded);
        }
        //this.isLoading = true;
        //this.$refs.adRewardedVideo.load();
      },
      onaderror(e) {
        // 广告加载失败
        console.log(e.detail);
        this.isLoading = false;
      },
        managerCoupon(){
        console.log("aaa")
        uni.navigateTo({// url: '/pages/my/order/order'
          url:'/pages/my/coupon/index'
        })
      },
		  managerShop(){
			  /**
			   * 先判断登陆没有
			   */
			  let token = uni.getStorageSync("jwttoken")
			  if(!token){//说明没有登陆跳转到登陆页面
				  uni.navigateTo({// url: '/pages/my/order/order'
					  url:'/pages/login/login'
				  })
			  }else{
				  uni.navigateTo({// url: '/pages/my/order/order'
					  url:'/pages/my/shop/index'
				  })
			  }

      },
      mverify(e){
        console.log('验证结果:',e);
      },
			openLoginPopup() {
				if(this.hasLogin) {
					return
				}
				this.$refs['loginPopup'].open()
			},
			info() {
				uni.navigateTo({
					url: '/pages/my/info'
				})
			},
			taskCenter() {
				uni.navigateTo({
					url: '/pages/task-center/task-center'
				})
			},
			openMember() {
				uni.navigateTo({
					url: '/pages/my/member'
				})
			},
			myCode() {
				uni.navigateTo({
					url: '/pages/my/code'
				})
			},
			openBenefits() {
				if(this.hasLogin) {
					uni.navigateTo({
						url: '/pages/my/benefits'
					})
				} else {
					this.$refs['loginPopup'].open()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
/* #ifdef H5 */
page {
	height: auto;
	min-height: 100%;
}
/* #endif */

.content {
	padding: 0 30rpx;
}

.welcome {
	position: relative;
	margin-top: -136rpx;
	display: flex;
	flex-direction: column;
	font-size: $font-size-lg;
	color: $text-color-warning;
}

.member-card {
	background-color: $bg-color-white;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	border-radius: $border-radius-base;
	margin-bottom: 40rpx;

	.info {
		position: relative;
		margin-top: -50rpx;
		display: flex;
		align-items: center;
		position: relative;
		padding: 20rpx 0;
		border-bottom: 1rpx solid rgba($color: $border-color, $alpha: 0.3);

		.title {
			flex: 1;
			font-size: 40rpx;
			color: $text-color-base;
			display: flex;
			align-items: center;

			.tips {
				margin-left: 10rpx;
				font-size: $font-size-sm;
				color: $text-color-assist;
				background-color: #e9e9e9;
				padding: 10rpx 30rpx;
				border-radius: 50rem !important;
				display: flex;
				align-items: center;

				image {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}

		.avatar {
			width: 150rpx;
			height: 150rpx;
			border-radius: 100%;
		}

		.badage {
			font-family: 'neutra';
			position: absolute;
			bottom: 20rpx;
			left: 0;
			border: 2rpx solid $text-color-base;
			padding: 2rpx 20rpx;
			border-radius: $border-radius-lg;
			font-size: $font-size-base;
		}
	}

	.row {
		margin-top: $spacing-row-base;
		width: 100%;
		display: flex;
		align-items: center;

		.grid {
			flex: 1;
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 100rpx;
				height: 100rpx;
			}

			.value {
				font-family: 'neutra';
				margin-bottom: $spacing-col-sm;
				font-size: $font-size-lg;
			}

			.title {
				font-size: $font-size-sm;
				color: $text-color-grey;
			}
		}
	}
}

.xinqiubobao {
	width: 100%;
	position: relative;

	.title {
		margin: 10rpx 0;
		font-size: $font-size-lg;
		font-weight: 500;
	}

	.swiper {
		height: 200rpx;
		margin-bottom: 10rpx;

		.swiper-item {

			.swiper-item-wrapper {
				display: flex;
				background-color: $bg-color-white;
				padding: 40rpx 60rpx;
				border-radius: $border-radius-base;
				align-items: center;
				margin-right: 40rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 100%;
					margin-right: 20rpx;
				}

				.desc {
					display: flex;
					flex-direction: column;

					.title {
						font-size: $font-size-medium;
						font-weight: 500;
						margin-bottom: 10rpx;
					}

					.desc {
						font-size: $font-size-sm;
						color: $text-color-grey;
					}
				}
			}
		}
	}
}

.task-center {
	margin: 40rpx 0;
	background-color: $bg-color-white;
	padding: 10rpx 0;
	display: flex;
	align-items: center;
	border-radius: $border-radius-lg;

	.intro {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.title {
			font-size: $font-size-lg;
			color: $text-color-base;
		}
		.subtitle {
			font-family: 'neutra';
			font-size: $font-size-sm;
		}
	}

	.image-wrapper {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 200rpx;
			height: 200rpx;
		}
	}
}

.open-gift {
	width: 100%;
	background-color: $bg-color-white;
	padding: 30rpx 40rpx;
	margin-bottom: 20rpx;

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		.title {
			font-size: $font-size-lg;
			font-weight: 500;
		}

		.subtitle {
			font-size: $font-size-base;
			color: $text-color-grey;
		}
	}

	.row {
		display: flex;
		flex-wrap: wrap;

		.grid {
			width: 33.3333%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20rpx;

			image {
				width: 70rpx;
				height: 70rpx;
				margin-bottom: $spacing-row-base;
			}

			.title {
				font-size: $font-size-base;
				color: $text-color-base;
				display: flex;
				align-items: baseline;

				.number {
					margin-left: 5rpx;
					font-family: 'neutra';
					color: $color-warning;
				}
			}
		}
	}
}

.list-cell-wrapper {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.title {
		font-size: $font-size-lg;
	}

	.subtitle {
		font-size: $font-size-sm;
		color: $text-color-assist;
	}
}
</style>
